<template>
  <div class="header clearfix">
    <div class="fl">
      <!-- <img src="../assets/milaitec.png" alt="" style="width:200px; height:50px; margin-left: -40px;"> -->
    </div>
    <div class="person-profile fr">
      <span class="icon"><i class="person-icon"></i> <i>{{userName}}</i></span>
       <span class="exit" @click="updatePassword">修改密码</span>
      <span class="exit" @click="handleExit">{{exit}}</span>
    </div>

     <div class="other">
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        class="dialogVisible"
        width="30%">
        <div style="text-align: center;">
          <div class="line">
            <span class="label"><span class="red">*</span>用户名</span>
            <el-input
              :disabled= "nameDisable"
              class="input"
              placeholder="请输入用户名"
              v-model="userName"
              clearable>
            </el-input>
          </div>
          <div class="line">
            <span class="label"><span class="red">*</span>密码</span>
            <el-input
              class="input"
              placeholder="请输入密码"
              v-model="password"
              clearable>
            </el-input>
          </div>
          
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAdd">确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  // import { mapGetters, mapActions } from 'vuex'
import { removeToken } from '@/utils/auth'
import _account from '@/services/account.js'
export default {
  data () {
    return {
      nameDisable: false,
      exit:'退出',
      userName:'admin',
      dialogTitle:'修改密码',
      dialogVisible:false,
      password:'',
    }
  },
  computed:{
    // ...mapGetters([
    //   'getUid',
    //   'getLogoutStatus'
    // ])
  },
  watch:{
    // getLogoutStatus(newVal, oldVal){
    //   if(newVal !== oldVal){
    //     this.$router.replace('/login')
    //   }
    // },
    // getUid(newVal, oldVal){
    //   if(newVal !== oldVal){
    //     this.userName = this.getUid
    //   }
    // }
  },
  methods: {
    // ...mapActions([
    //   'userLogout'
    // ]),
    handleExit() {
      removeToken()
      this.$router.push('/')
      // this.userLogout()
    },
    updatePassword(){
        this.dialogVisible =true
        this.nameDisable = true
    },
    confirmAdd(){
        let params = {
          "name": this.userName,
          "password":this.password
        }
        _account.updatePassword(params)
        .then(res => {
          if(res.data.code === 200){
            this.$msg.success('修改成功')
            this.dialogVisible = false
          }else if(res.data.code === 2034){
            this.$msg.error(res.data.msg)
          }
        })
    }
  },
  created(){
    // this.userName = this.getUid
    this.userName = localStorage.getItem('username')
  }
}
</script>


<style lang="scss" scoped>
@import '~styles/variables.scss';
.header{
  width: 100%;
  background-color: #242f42;
  padding:0 30px;
  font-weight: 100;
  .person-profile{
    display: block;
    float: right;
    color: #ccc;
    line-height: $base-height;
    vertical-align: middle;
    &:after{
      content: '';
      clear: both;
      display: block;
      overflow: hidden;
      zoom: 1;
      }
    .icon{
      font-size: 20px;
      margin-right: 10px;
      i{
        font-style: normal;
        font-size: 16px;
        padding-left: 10px;
      }
    }
    .exit, .permission{
      border: 1px solid #ccc;
      color: #ccc;
      border-radius: $border-radius-base;
      padding: 2px 15px;
      font-size: 14px;
      cursor: pointer;
    }
    .person-icon{
      width: 30px;
      height: 30px;
      display: inline-block;
      background-image: url("../assets/person_icon.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-color: transparent;
      vertical-align: middle;
    }
  }
}
.wrap{
  .header{
    .select{
      width:150px;
    }
    .input{
      display: inline-block;
      width:200px;
    }
    .add-btn{
      height: 40px;
      font-size: 12px;
    }
  }
  .table{
    margin-top: 10px;
    margin-bottom: 25px;
  }
  .other{
    .dialogVisible{
      .line{
        margin-bottom: 10px;
        .input, .select{
          width:250px;
        }
      }
      .label{
        display: inline-block;
        width:80px;
        text-align: right;
        margin-right: 10px;
        font-weight: bold;
        font-size: 14px;
        .red{
          color: #f00;
        }
      }
    }
  }
}
</style>